<template>
  <div class="app-container">
    <vxe-grid
      id="xGrid"
      ref="xGrid"
      align="center"
      border
      :columns="tableColumn"
      :custom-config="{ storage: true }"
      :edit-config="editConfig"
      :export-config="{}"
      :form-config="formConfig"
      height="auto"
      :proxy-config="tableProxy"
      resizable
      size="small"
      stripe
      :toolbar-config="tableToolbar"
      @toolbar-tool-click="toolbarToolClickEvent"
    >
      <!--工具栏-->
      <template #toolbar_buttons>
        <vxe-button>添加</vxe-button>
      </template>
      <template #toolbar_tools>
        <vxe-button circle icon="vxe-icon-add" status="primary" />
      </template>
      <!--搜索栏-->
      <template #name_item="{ data }">
        <vxe-input v-model="data.name" placeholder="请输入名称" type="text" />
      </template>
      <template #sex_item="{ data }">
        <vxe-select v-model="data.sex" transfer>
          <vxe-option
            v-for="item in sexList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </vxe-select>
      </template>
      <template #operate_item>
        <vxe-button content="查询" status="primary" type="submit" />
        <vxe-button content="重置" type="reset" />
      </template>
      <!--原位置编辑-->
      <template #name_edit="{ row }">
        <vxe-input v-model="row.name" clearable placeholder="姓名" />
      </template>
      <template #age_edit="{ row }">
        <vxe-input
          v-model="row.age"
          clearable
          placeholder="年龄"
          type="number"
        />
      </template>
      <template #sex_default="{ row }">
        <span>{{ formatSex(row.sex) }}</span>
      </template>
      <template #sex_edit="{ row }">
        <vxe-select v-model="row.sex" clearable filterable transfer type="text">
          <vxe-option
            v-for="item in sexList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </vxe-select>
      </template>
      <!--操作-->
      <template #operate="{ row }">
        <template v-if="$refs.xGrid.isActiveByRow(row)">
          <vxe-button
            circle
            icon="vxe-icon-save"
            status="primary"
            title="保存"
            @click="saveRowEvent(row)"
          />
        </template>
        <template v-else>
          <vxe-button
            circle
            icon="vxe-icon-edit"
            title="编辑"
            @click="editRowEvent(row)"
          />
        </template>
        <vxe-button
          circle
          icon="vxe-icon-delete"
          title="删除"
          @click="removeRowEvent(row)"
        />
        <vxe-button circle icon="vxe-icon-eye-fill" title="查看" />
      </template>
      <!--分页-->
      <template #pager>
        <vxe-pager
          :current-page.sync="current_page"
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          :page-size.sync="per_page"
          :perfect="true"
          :total="total"
          @page-change="handlePageChange"
        />
      </template>
    </vxe-grid>
  </div>
</template>

<script>
  import VXETable from 'vxe-table'
  export default {
    data() {
      return {
        total: 0,
        current_page: 1,
        per_page: 10,
        loading: true,
        params: {
          page: 1,
          pagesize: 10,
        },
        sexList: [
          { value: 1, label: '男' },
          { value: 0, label: '女' },
        ],
        tableColumn: [
          { type: 'seq', width: 50 },
          {
            field: 'name',
            title: '姓名',
            editRender: {},
            slots: { edit: 'name_edit' },
          },
          {
            field: 'age',
            title: '年龄',
            editRender: {},
            slots: { edit: 'age_edit' },
          },
          {
            field: 'sex',
            title: '性别',
            editRender: {},
            slots: { default: 'sex_default', edit: 'sex_edit' },
          },
          { field: 'role', title: '角色' },
          {
            field: 'operate',
            title: '操作',
            slots: { default: 'operate' },
            width: 160,
          },
        ],
        tableToolbar: {
          perfect: true,
          export: true,
          print: true,
          custom: true,

          slots: {
            buttons: 'toolbar_buttons',
            tools: 'toolbar_tools',
          },
        },
        editConfig: {
          // 设置触发编辑为手动模式
          trigger: 'manual',
          // 设置为整行编辑模式
          mode: 'row',
          // 显示修改状态和新增状态
          showStatus: true,
        },
        formConfig: {
          data: {
            name: '',
            sex: '',
          },
          size: 'mini',
          items: [
            { field: 'name', title: 'Name', slots: { default: 'name_item' } },
            {
              field: 'sex',
              title: '性别',
              titlePrefix: {
                message: '帮助信息！！！',
                icon: 'vxe-icon-question-circle-fill',
              },
              slots: { default: 'sex_item' },
            },
            { slots: { default: 'operate_item' } },
          ],
        },
        tableProxy: {
          ajax: {
            query: () => {
              return new Promise((resolve) => {
                const list = [
                  {
                    id: 10001,
                    name: 'Test1',
                    role: 'Develop',
                    sex: 1,
                    age: 28,
                    address: 'Shenzhen',
                  },
                  {
                    id: 10002,
                    name: 'Test2',
                    role: 'Test',
                    sex: 0,
                    age: 22,
                    address: 'Guangzhou',
                  },
                  {
                    id: 10003,
                    name: 'Test3',
                    role: 'PM',
                    sex: 1,
                    age: 32,
                    address: 'Shanghai',
                  },
                  {
                    id: 10004,
                    name: 'Test4',
                    role: 'Designer',
                    sex: 0,
                    age: 23,
                    address: 'Shenzhen',
                  },
                ]
                resolve(list)
              })
            },
          },
        },
      }
    },
    created() {
      this.tableToolbar.tools = [
        { code: 'add', status: 'primary', circle: true, icon: 'vxe-icon-add' },
        {
          code: 'del',
          status: 'danger',
          circle: true,
          icon: 'vxe-icon-delete',
        },
      ]
    },
    methods: {
      handlePageChange({ currentPage, pageSize }) {
        this.params.page = currentPage
        this.params.pagesize = pageSize
        this.getList()
      },
      editRowEvent(row) {
        const $grid = this.$refs.xGrid
        $grid.setActiveRow(row)
      },
      saveRowEvent() {
        const $grid = this.$refs.xGrid
        $grid.clearActived().then(() => {
          this.gridOptions.loading = true
          setTimeout(() => {
            this.gridOptions.loading = false
            VXETable.modal.message({ content: '保存成功！', status: 'success' })
          }, 300)
        })
      },
      async removeRowEvent(row) {
        const type = await VXETable.modal.confirm('您确定要删除该数据?')
        const $grid = this.$refs.xGrid
        if (type === 'confirm') {
          $grid.remove(row)
        }
      },
      formatSex(value) {
        const map = { 1: '男', 0: '女' }
        return map[value] || ''
      },
      toolbarToolClickEvent({ code }) {
        switch (code) {
          case 'add':
            this.$message.success('add')
            break
          case 'del':
            this.$message.error('delete')
            break
        }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
